<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<!--
    1/v:text: 更新元素的textContent
    2/v-html: 更新元素的innerHTML
    3/v-if: 如果为true, 当前标签才会输出到页面
    4/v-else: 如果为false,当前标签才会输出到页面
    5/v-show: 通过控制display样式来控制显示/隐藏
    6/v-for: 遍历数组/对象
    7/v-on: 绑定事件监听，一般简写为@
    8/v-bing: 前置绑定解析表达式，可以省略v-bind
    9/v-model: 双向数据绑定
    10/ref: 指定唯一标识，vue对象通过$els属性访问这个元素对象
    11/v-cloak:防止闪现，与css配合:[v-cloak]{display:none}
-->
<div id="example">
    <p ref="content">北梦.com</p>
    <button @click="hint">提示</button>
<!--    这会导致加载成功之前显示{{msg}}-->
<!--    <p v-text="msg">{{msg}}</p>-->
    <p v-cloak>{{msg}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    alert('----')
    const vm = new Vue({
        el:'#example',
        data:{
            msg:'北梦木兮',
        },
        methods:{
            hint(){

                alert(this.$refs.content/*👈现在获得的是p标签，对象用名字，数组用下标*/.innerHTML)
            }
        }
    })
</script>
</body>
</html>